<template>
  <div class="navbar-com navbar-main">
    <h1 class="logo">喜阅</h1>
    <div class="search-box" @click="handleSearch">
      <span class="search-icon"><van-icon name="search" /></span>
      <input readonly placeholder="书名或者作者" type="text" />
    </div>
    <div class="near_read"><van-icon name="clock-o" size="20px" @click="toNearRead" /></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFocus: false,
      searchContent: ''
    }
  },
  methods: {
    handleSearch() {
      this.$router.push({
        path: '/search'
      })
    },
    toNearRead(){
      this.$router.push({
        path: '/recentread'
      })
    }
  },
}
</script>

<style scoped>
.navbar-main {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 15PX;
}

.navbar-main .logo {
  color: #ff5722;
  font-size: 25PX;
  margin-right: 15PX;
  line-height: 1;
}

.navbar-main .search-box {
  flex: 150PX 0 0;
  height: 30PX;
  box-sizing: border-box;
  background: #f7f7f7;
  padding-left: 5PX;
  border: 1PX solid #dfdfdf;
  border-radius: 15PX;
  transition: .5s;
  color: #999;
}

.search-icon {
  position: absolute;
  height: 30PX;
  padding: 5PX 0;
  box-sizing: border-box;
  font-size: 20PX;
  color: #dfdfdf;
}

.search-box input {
  display: block;
  width: 100%;
  font-size: 13PX;
  height: 30PX;
  background: transparent;
  box-sizing: border-box;
  padding: 0 10PX 0 24PX;
  border: 0;
}

.near_read {
  color: #a0a0a0;
  margin-left: 15PX;
  text-align: right;
  font-size: 15PX;
  flex: 1;
}

@media screen and (min-width:968PX) {

  .near_read,
  .usercenter {
    cursor: pointer;
  }
}
</style>